<template>
    <base-tree
        :isSearch="true"
        :data="data"
        :showCheckbox="true"
        :checkStrictly="true"
        @checkChange="handleCheckChange"
        @node-click="handleNodeClick"
        :props="defaultProps"
        style="background: transparent !important"
    >
    </base-tree>
</template>

<script>
    import BaseTree from '@/components/BaseTree'
    import { meterTreeGet } from '@/api/category.js'
    export default {
        components: {
            BaseTree,
        },
        props: {
            title: {
                type: String,
                Number,
                default: '绑定计量器具',
            },
            rowData: {
                type: Object,
            },
        },
        created() {
            this.initDlg()
            this.getTreeData()
        },
        data() {
            return {
                resourceList: [],
                deptOptions: [],
                data: [],
                defaultProps: {
                    children: 'children',
                    label: 'label',
                },
            }
        },
        methods: {
            initDlg() {
                this.$emit('SetTitle', this.title)
                this.$emit('SetPageWidth', 600)
                this.$emit('SetPageActions', [
                    {
                        text: '保存',
                        theme: 'primary',
                        handle: () => {
                            //前端过滤不合格的节点
                            if (this.resourceList.length >= 1) {
                                this.$emit('Close', {
                                    state: 'save',
                                    data: {
                                        meterUtensilIds: this.resourceList,
                                    },
                                })
                            }
                        },
                    },
                    {
                        text: '取消',
                        theme: 'default',
                        handle: () => {
                            this.$emit('Close', { state: 'close' })
                        },
                    },
                ])
            },
            getTreeData() {
                const { energyType, projectId } = this.rowData
                meterTreeGet({
                    projectId,
                    energyType,
                }).then((res) => {
                    if (res.code === 200) {
                        this.data = res.data
                    }
                })
            },
            handleCheckChange(data) {
                this.resourceList = data.data.checkedNodes.map((item) => {
                    return item.id
                })
            },
            handleNodeClick(data) {},
        },
    }
</script>
<style lang="scss" scoped>
    .el-tree {
        background-color: $nav-bar-bg-color;
    }
    ::v-deep .el-tree-node__content:hover {
        background-color: $nav-bar-bg-color;
    }
</style>
